<script setup lang="ts">
import Notice from './Notice.vue'
import NewsItem from './NewsItem.vue'
import bg from '~/assets/home/home_3_03.jpg'
import h5bg from '~/assets/home/h5-home2.webp'
import { dynamicNews } from '~/api'

const router = useRouter()

const { basicInfo } = storeToRefs(useTeamInfoStore())
const NewsArr = ref([])

onMounted(async () => {
  const res = basicInfo.value?.scheduleId ? await dynamicNews(basicInfo.value.scheduleId) : { data: [] }
  NewsArr.value = res.data
})

function handleDetail(newsId) {
  router.push({ path: '/news-detail', query: { newsId, beforPath: 'news' } })
}
</script>

<template>
  <PageItem align="flex-start" :bg="bg" :h5bg="h5bg" show-footer style="justify-content: flex-start;">
    <div h-full gap-4 pt-4vw flex="~ col-reverse ">
      <div p="4" lt-gt="h-auto" lt-lg="!p-0" bg="white" h-full flex-1 overflow-hidden  flex="~ col ">
        <div min-h="4/5" flex-1 overflow-hidden>
          <n-scrollbar class="h-full!">
            <div flex="~ col gap-4">
              <NewsItem v-for="(item, index) in NewsArr" :key="index" :newsobj="item" @detail="handleDetail" />
            </div>
          </n-scrollbar>
        </div>
        <div m="t-4" flex="~ justify-center ">
          <!-- <n-pagination v-model:page="page" :page-size="10" :page-count="100" :page-slot="7" /> -->
        </div>
      </div>

      <Notice />
    </div>
  </PageItem>
</template>

<style scoped>

</style>
